<template>
  <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
    <template #right>
      <van-icon name="search" size="18"/>
    </template>
  </van-nav-bar>
  <div id="content">
    <router-view/>
  </div>
  <van-tabbar route>
    <van-tabbar-item replace to="/home" icon="wap-home-o">主页</van-tabbar-item>
    <van-tabbar-item replace to="/team" icon="search">队伍</van-tabbar-item>
    <van-tabbar-item replace to="/user" icon="user-o">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang='ts'>
import {useRouter} from "vue-router";
import {routes} from '../router'
import { ref} from "vue";
const DEFAULT_TITLE = "伙伴匹配系统"
const title = ref(DEFAULT_TITLE)
const router = useRouter()

router.beforeEach((to, from) => {
  const toPath = to.path;
  const route = routes.find((route) => {
      return route.path === toPath
  })
  title.value = route?.title ?? DEFAULT_TITLE
})

const onClickLeft = () => {
  router.back()
}
const onClickRight = () => {
  router.push('/search')

}
</script>
<style scoped>
#content{
  padding-bottom: 50px;
}
</style>